<template>
	<u-popup v-model="showPop" mode="bottom" border-radius="24">
		<view class="popup-bg">
			<view class="form-area-bg" v-if="status == 0">
				<view class="form-area">
					<u-form ref="uForm" :model="formData" :error-type="['toast']" :rules="rules">
						<u-form-item prop="name" labelWidth="210" label="姓名" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417bca3a8105.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('name')">
							<u-input v-model="formData.name" placeholder="请输入申请人名称" />
						</u-form-item>
						
						<u-form-item prop="phone" labelWidth="210" label="手机号" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/202407231614175e2115595.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('phone')">
							<u-input v-model="formData.phone" placeholder="请输入手机号" />
						</u-form-item>
						
						<u-form-item prop="id_code" labelWidth="210" label="身份证号" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161450537302785.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('id_code')">
							<u-input v-model="formData.id_code" placeholder="请输入身份证号" />
						</u-form-item>
						
						<u-form-item prop="company_name" labelWidth="210" label="公司名称" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('company_name')">
							<u-input v-model="formData.company_name" placeholder="请输入公司名称" />
						</u-form-item>
						
						<u-form-item prop="address" labelWidth="210" label="公司所在地" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('address')">
							<u-input v-model="formData.address" placeholder="请输入公司所在地" />
						</u-form-item>
						
						<u-form-item prop="tax_no" labelWidth="210" label="纳税识别号" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('tax_no')">
							<u-input v-model="formData.tax_no" placeholder="请输入企业纳税识别号" />
						</u-form-item>
						
						<u-form-item prop="est_date" labelWidth="210" label="成立时间" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('est_date')">
							<u-input v-model="formData.est_date" placeholder="请输入成立时间" />
						</u-form-item>
						
						<u-form-item prop="hy" labelWidth="210" label="所属行业" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('hy')">
							<u-input v-model="formData.hy" placeholder="请输入公司所属行业" />
						</u-form-item>
						
						<u-form-item prop="company_type" labelWidth="210" label="公司类型" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" v-if="showField('company_type')">
							<u-input v-model="formData.company_type" placeholder="请输入公司类型" />
						</u-form-item>
					</u-form>
					<u-button type="primary" :custom-style="{
						width:'90%',
						margin: '40rpx auto 0',
						borderRadius:'100rpx',
						background: 'linear-gradient(180deg, #6BB2FF 0%, #437EEA 100%)'
					}" @click="applyProduct">保存</u-button>
					<view class="u-tips-color u-text-center nr u-padding-top-30" @click="showPop = false">
						暂不申请
					</view>
				</view>
			</view>
			<view v-else class="u-text-center u-padding-top-30 u-padding-bottom-30">
				<u-icon name="checkmark-circle-fill" color="#FFF" size="120"></u-icon>
				<view class="xl bold white u-padding-top-10">
					信息报备成功
				</view>
				<view class="xs u-color-666666 bold u-padding-top-10 u-padding-bottom-30">
					<p>客户专员预计在一小时内联系您</p>
				</view>
				
				<view class="u-padding-30">
					<u-button @click="showPop = false" hover-class="none" type="success" shape="square" :custom-style="{
						borderRadius:'100rpx',
						background: 'linear-gradient(180deg, #6BB2FF 0%, #437EEA 100%)'
					}">关闭</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		createCustomer2
	} from '@/api/new';
	export default {
		name: "product-apply-form-tow",
		data() {
			return {
				status: 0,
				formData: {
					name: '',
					phone: '',
					id_code: '',
					company_name: '',
					address: '',
					tax_no: '',
					est_date: '',
					hy: '',
					company_type: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入申请人名称',
						trigger: 'blur,change'
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur,change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],
					id_code: [{
						required: true,
						message: '请输入身份证号码',
						trigger: 'blur,change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证号码不正确',
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		props: {
			value: {
				type: Boolean,
				required: true,
				default: false
			},
			id: {
				type: Number,
				default: 0
			},
			openType: {
				type: Number,
				default: 0
			},
			fields: {
				type: Array,
				default: () => []
			},
			productType: {
				type: Number,
				default: 0
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		methods: {
			showField(field) {
				return this.fields.length === 0 || this.fields.includes(field);
			},
			applyProduct() {
				const _this = this;
				_this.$refs.uForm.validate(valid => {
					if (valid) {
						createCustomer2({
							id: _this.id,
							..._this.formData
						}).then(res => {
							if (res.code == 1 ) {
								switch(this.openType){
									case 1:
										console.log(res)
										switch(this.productType){
											case 2:
												window.location.href = res.data.link
											break;
											default:
												uni.redirectTo({
													url: '/pages/product/qr_code_tow?id=' + res.data
												})
												break;
										}
										
										break;
									case 4:
										this.status = 1
										break;
								}
								
							} else {
								_this.$u.toast(res.msg);
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.popup-bg{
		padding-top: 10vh;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(110, 196, 255, 1) 72.53%, rgba(65, 178, 255, 1) 100%);
		background-image: url('https://resource.lanbaozixun.com/uploads/images/202407221641257d4b01953.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	.form-area-bg{
		border-radius: 30rpx 30rpx 0 0;
		padding: 24rpx 24rpx 0;
		background: url('https://resource.lanbaozixun.com/uploads/images/20240722164943621888328.png');
		background-size: 100% 100%;
	}

	.form-area {
		background: white;
		padding: 12rpx 24rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
	}

	.u-form-item {
		padding: 16rpx 0;
	}
</style>